import React from 'react'
import { Form, List, Switch, Input, Button, message, Icon, Upload, DatePicker } from 'antd';

import { connect } from 'dva'
import './Config.scss';
import { UrlConfig, getConfig, updateConfig } from '../../../services/fetch';
import moment from 'moment';
const { RangePicker } = DatePicker;
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    if (!isJPG && !isPNG) {
        message.error('只能上传jpg/png格式图片');
        return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小不能超过2M');
        return false;
    }
    return true;
}

const { TextArea } = Input;
@connect(({ video }) => ({
    video,
}))


@Form.create()
export default class Config extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            station_name: "",
            station_icon: "",
            station_pic: "",

            loading: false

        }


    }

    componentDidMount() {

        this.getConfig();

    }

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            this.setState({
                station_icon:info.file.response.data
            })
        }
    }

    handleChange2 = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            this.setState({
                station_pic:info.file.response.data
            })
        }
    }


    handleInputChange = (value) => {

    }
    submitConfig = () => {
        let config_json = {
            "station_name": this.state.station_name,
            "station_icon": this.state.station_icon,
            "station_pic": this.state.station_pic,
        }

        let data = {
            'config_id': 1,
            'config_json': config_json
        };
        updateConfig(data).then((res) => {
            if (res.data.code === 200) {
                message.success('修改成功！');
                this.getConfig();
            } else {
                message.error(res.data.msg)
            }
        })
    }
    /**
     * 获取配置数据
     */
    getConfig = () => {
        getConfig().then((res) => {
            let data = res.data.data;
            let config_json = data.config_json;
            this.setState(config_json)
        })
    }

    render() {

        let station_name = this.state.station_name;
        const station_name_config = <Input rows={4} value={station_name} onChange={(e) => this.setState({ station_name: e.target.value })} />;

        // const station_time_config= (
        //     <DatePicker  format="YYYY-MM-DD HH:mm:ss"  showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
        //     onChange={(date, dateString)=>this.setState({station_time: dateString})}/>
        // )

        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        let station_icon = this.state.station_icon;
        let station_pic = this.state.station_pic;

        const uploadPic = (
            <Upload
                name="img"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action={`${UrlConfig}/fcinformation/Information/uploadImg`}
                beforeUpload={beforeUpload}
                onChange={this.handleChange}
            >
                {station_pic ? <img src={station_pic} alt="avatar" /> : uploadButton}
            </Upload>
        );

        const uploadIcon = (
            <Upload
                name="img"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action={`${UrlConfig}/fcinformation/Information/uploadImg`}
                beforeUpload={beforeUpload}
                onChange={this.handleChange}
            >
                {station_icon ? <img src={station_icon} alt="avatar" /> : uploadButton}
            </Upload>
        );
        const data = [
            {
                title: '站点名称',
                description: '',
                content: station_name_config
            },
            {
                title: '站点logo',
                description: '',
                content: uploadIcon
            }
            // {
            //     title: '电视台水印',
            //     description: '',
            //     content: uploadPic
            // },
            // {
            //     title: '电视台时间',
            //     description: '',
            //     content:station_time_config
            // },

        ];

        return (
            <section className="Comment" >
                <header className="header">
                    全局配置
            </header>
                <div className="content">
                    <div className="main configGlobal">
                        <List

                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={item => (
                                <List.Item>
                                    <List.Item.Meta
                                        title={item.title}
                                        description={item.description}
                                    />
                                    <div style={{ width: "100%" }}>{item.content}</div>
                                </List.Item>
                            )}
                        />
                        <div>
                            <Button
                                type="primary"
                                style={{
                                    marginRight: '20px'
                                }}
                                onClick={this.submitConfig}
                            >提交</Button>
                            <Button
                                onClick={() => {
                                    this.getConfig();
                                }}
                            >重置</Button>
                        </div>
                    </div>
                </div>
            </section>


        );
    }
}
